<script setup>
import CommetnItem from './CommentItem.vue'
</script>

<template>
  <yk-space class="message" dir="vertical" :size="16" >
    <div class="title">私信 54464</div>
    <yk-scrollbar style="width: 100%">
      <yk-space class="content" dir="vertical" :size="16">
        <comment-item v-for="item in 20" :key="item" class="item" />
      </yk-space>
    </yk-scrollbar>
    <yk-space class="pagination">
      <yk-pagination fix-width :total="400" style="margin-top: 12px;width:100%;justify-content: flex-end;" />
    </yk-space>
  </yk-space>
</template>
<style scoped lang="less">
.message {
  width:100%;
  height: 640px;
  border-radius: 8px;
  padding:24px;
  background-color: @bg-color-l;

  .pagination{
    padding-right:24px;
    width:100%;
  }

  .title {
    font-size: 18px;
    font-weight: 600;
  }

  .content {
    overflow: hidden;
  }

  .item {
    width: 100%;
  }
}

</style>